<template>
    <cell-wrapper
      v-for="wrapperType in ['SHADOW', 'TABLE_CELL']"
      :key="wrapperType"
      :wrapper-type="wrapperType"
      :style="{ backgroundColor: contentStyle.backgroundColor }"
    >
      <text-display-cell
        v-if="!editState"
        :text="showValue"
        :columnConfig="columnsConfig"
        v-bind="contentStyle"
      />
      <a-date-picker
        v-else
        :value="showValue"
        :showTime="getShowTime"
        @change="handleValueChange"
        :picker="getPicker"
        :format="props.columnsConfig.contentConfig.format"
        :valueFormat="props.columnsConfig.contentConfig.format"
      />
    </cell-wrapper>
  </template>
  
  <script>
    import { computed, defineComponent } from 'vue';
    import TextDisplayCell from '@/components/page/tableCell/textDisplayCell.vue';
    import CellWrapper from '@/components/page/tableCell/cellWrapper.vue';
    import { judgeCellEditable } from '@/utils/index';
    import dayjs from 'dayjs';
  
    export default defineComponent({
      name: 'DatePickerTableCell',
      components: {
        TextDisplayCell,
        CellWrapper,
      },
      inheritAttrs: false,
      props: {
        // 当前单元格的值
        value: {
          type: String,
          default: () => {
            return null;
          },
        },
        // 单元格的默认样式
        defaultStyle: {
          type: Object,
          default: () => {
            return {};
          },
        },
        // 单元格的条件样式配置
        conditionStyle: {
          type: Array,
          default: () => {
            return [];
          },
        },
        // 当前行的数据
        rowData: {
          type: Object,
          default: () => {
            return {};
          },
        },
        // 单元格条件配置的中使用的动态数据：key为数据的id，value为数据的值
        conditionValueMap: {
          type: Object,
          default: () => {
            return {};
          },
        },
        format: {
          type: String,
          default: () => {
            return 'YYYY-MM-DD HH:mm';
          },
        },
        // 当前列的配置
        columnsConfig: {
          type: Object,
          default: () => {
            return {};
          },
        },
        // 当前单元格是否处于编辑状态
        isEdit: {
          type: Boolean,
          default: () => {
            return false;
          },
        },
      },
      emits: ['change'],
      setup(props, { emit }) {
        const pickerList = {
          'YYYY-MM': 'month',
          YYYY: 'year',
        };
        const editState = computed(() => {
          return (
            props.isEdit &&
            judgeCellEditable(props.columnsConfig, props.rowData, props.conditionValueMap)
          );
        });
        const getPicker = computed(() => {
          return pickerList[props.columnsConfig.contentConfig.format] || 'date';
        });
        // 内容显示的样式
        const contentStyle = computed(() => {
          let { iconType, icon, color, backgroundColor } =
            props.columnsConfig.contentConfig.defaultStyle || {};
          return { iconType, icon, color, backgroundColor };
        });
        const getShowTime = computed(() => {
          return ['YYYY-MM-DD HH:mm:ss', 'YYYY-MM-DD HH:mm'].includes(props.columnsConfig.contentConfig.format);
        });
  
        function handleValueChange(value) {
          emit('change', value);
        }
  
        const showValue = computed(() => {
          try {
            if (props.value === undefined || props.value === null) {
              return '';
            } else {
              // 尝试使用 dayjs 解析数据，并进行格式化
              return dayjs(props.value).format(props.columnsConfig.contentConfig.format);
            }
          } catch {
            return props.value;
          }
        });
  
        return {
          editState,
          showValue,
          contentStyle,
          getPicker,
          getShowTime,
          handleValueChange,
        };
      },
    });
  </script>
  